<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      dialog {
        position: relative;
      }

      dialog span {
        position: absolute;
        right: 0px;
        /*使用相对定位和绝对定位来移动x的位置*/
        top: 0px;
        cursor: pointer;
        /*给鼠标设置手形*/
        padding: 10px;
        /*设置鼠标手形的范围*/
      }
      figure {
        width: 400px;
        /*一般不设置高度 随内容撑开*/
        text-align: center; /*文字居中*/
        margin: 0 auto; /*居中*/
      }
      figure img {
        width: 100%; /*图片宽度铺满figure高度自适应*/
      }
      figure p {
        margin-top: -30px; /*通过margin来改变文字的位置*/
      }
      figure h4 {
        position: relative;
        top: 50px; /*通过定位改变文字的位置*/

        /*通过位移改变文字的位置*/
        /*-webkit-transform: translate(0,50px);*/
        /*-moz-transform: translate(0,50px);*/
        /*-ms-transform: translate(0,50px);*/
        /*-o-transform: translate(0,50px);*/
        /*transform: translate(0,50px);*/
      }
    </style>
  </head>

  <body>
    <!-- 1）mark:高亮显示 -->
    <p>
      html由<mark>W3C</mark
      ><mark>和WHAT</mark> 组织结构共同研发出，于2014年正式发布。
    </p>
    <!-- ​	2）details（描述）与summary（摘要）：一般用于名词解释或用于封装一个区块-->
    <details>
      <summary>大前端开发</summary>
      <h2>大前端开发包括：</h2>
      <ul>
        <li>组件开发</li>
        <li>模块化开发</li>
        <li>自动开发</li>
        <li>后台开发</li>
      </ul>
    </details>

    <!-- 3）meter：定义度量衡 -->
    <meter value="30" min="0" max="120" low="60" high="90" optimum="60"></meter
    >公里/小时
    <meter value="70" min="0" max="120" low="60" high="90" optimum="60"></meter
    >公里/小时
    <meter value="110" min="0" max="120" low="60" high="90" optimum="60"></meter
    >公里/小时

    <!-- 4）progress：显示一个进度条 -->
    <p>任务已完成:</p>
    <progress value="50" min="0" max="100"></progress> 50%

    <!-- ​	5）dialog：定义对话框或窗口 -->
    <dialog open>
      <span>&times;</span>
      <h2>大前端开发包括：</h2>
      <ul>
        <li>组件开发</li>
        <li>模块化开发</li>
        <li>自动开发</li>
        <li>后台开发</li>
      </ul>
    </dialog>

    <!-- 6）figure：标签用于对元素进行组合（一般用来组合一张图的标题，图片和图片描述等） -->
    <figure>
      <h4>Python</h4>
      <img src="imgs/1.jpg" alt="图片" />
      <p>人生苦短,我用python</p>
    </figure>
  </body>
</html>
